<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover" v-if="viewLoading">
  <div class="ivu-card-head"><p>{{$route.meta.title}}</p></div>
  <div class="ivu-card-body">
    <Form ref="userForm" :model="formModel">
        <Row type="flex" :gutter="10">
          <Col :xs="24" :sm="12" :lg="8">
            <div class="ivu-form-item">
              <label class="ivu-form-item-label">会员编号：</label>
              <div class="ivu-form-item-content">
                <div class="ivu-input-wrapper ivu-input-type">
                  <input autocomplete="off" spellcheck="false" type="text" :value="formModel.account.user_code" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                </div>
              </div>
            </div>
          </Col>

          <Col :xs="24" :sm="12" :lg="8" v-if="formModel.s_account">
            <div class="ivu-row" style="margin-left: -5px; margin-right: -5px;">
              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">服务中心编号：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.s_account.user_code" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>

              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">服务中心姓名：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.s_account.real_name" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="真实姓名："><Input v-model="formModel.account.real_name" placeholder="请输入真实姓名"/></FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="地区："><Cascader :data="areaList" v-model="formModel.account_info.address_code"/></FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="详细地址："><Input v-model="formModel.account_info.address_detail" placeholder="请输入详细地址"/></FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="手机号：" prop="phone"><Input v-model="formModel.account.phone" placeholder="请输入手机号"/></FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8" v-if="formModel.p_account">
            <div class="ivu-row" style="margin-left: -5px; margin-right: -5px;">
              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">推荐人编号：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.p_account.user_code" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>

              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">推荐人姓名：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.p_account.real_name" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Col>

          <Col :xs="24" :sm="12" :lg="8" v-if="formModel.n_account">
            <div class="ivu-row" style="margin-left: -5px; margin-right: -5px;">
              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">接点人编号：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.n_account.user_code" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>

              <div class="ivu-col ivu-col-span-sm-12" style="padding-left: 5px; padding-right: 5px;">
                <div class="ivu-form-item">
                  <label class="ivu-form-item-label">接点人姓名：</label>
                  <div class="ivu-form-item-content">
                    <div class="ivu-input-wrapper ivu-input-type">
                      <input autocomplete="off" spellcheck="false" type="text" :value="formModel.n_account.real_name" disabled="disabled" class="ivu-input ivu-input-disabled"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
         </Col>

          <Col :xs="24" :sm="12" :lg="4">
            <FormItem label="会员等级：">
              <Select v-model="formModel.account.user_level">
                <Option v-for="(v, k) in apiConfig['user_level']" :value="k.toString()" :key="k">{{ v }}</Option>
              </Select>
            </FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="4">
            <FormItem label="店级别：">
              <Select v-model="formModel.account.shop_level">
								<Option v-for="(v, k) in apiConfig['user_shop_level']" :value="k.toString()" :key="k">{{ v }}</Option>
              </Select>
            </FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="4">
            <FormItem label="状态：">
              <Select v-model="formModel.account.status">
                <Option v-for="(v, k) in apiConfig['user_status']" :value="k.toString()" :key="k">{{ v }}</Option>
              </Select>
            </FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="重置密码："><Input v-model="formModel.account.password" placeholder="不输入默认不修改"/></FormItem>
          </Col>

          <Col :xs="24" :sm="12" :lg="8">
            <FormItem label="重置安全密码："><Input v-model="formModel.account.safe_password" placeholder="不输入默认不修改"/></FormItem>
          </Col>
      </Row>

      <FormItem>
        <Button type="primary" :loading="buttonLoading" @click="clickSubmit">修改</Button>
        <Button type="ghost" @click="$router.go(-1);">返回</Button>
      </FormItem>
    </Form>
  </div>
</div>
</template>

<script>
import areaList from '@/mock/area.json';
import apiConfig from '@/api/config';

export default {
  data() {
    return {
      formModel: {},
      areaList,
      apiConfig: {},
      buttonLoading: false,
      viewLoading: false
    };
  },
  methods: {
    clickSubmit() {
      var _this = this;
      _this.buttonLoading = true;
      _this.$store.dispatch('user/update', {id: _this.$route.query.user_id, data: _this.formModel}).then(function(res) {
        _this.buttonLoading = false;

        _this.$Message.success({
          content: res.message,
          onClose: function() {
            _this.$router.push({ name: 'userIndex' });
          }
        });
      });
    },
    _initialize() {
      var _this = this;

      if(_this.$route.query.user_id == undefined) {
        _this.$router.push({name: 'userIndex'});
      }

      _this.$store.dispatch('user/findFirstById', _this.$route.query.user_id).then(function(model) {
        if(model) {
          if(model.account_info.address_code.toString() !== '0') {
            model.account_info.address_code = [
              model.account_info.address_code.substr(0,2)+'0000',
              model.account_info.address_code.substr(0,4)+'00',
              model.account_info.address_code
            ];
          } else {
            model.account_info.address_code = [];
          }

          _this.formModel = model;
          _this.viewLoading = true;
        }
      });
    }
  },
  mounted() {
    var _this = this;
    apiConfig.find().then(function(value) {
      _this.apiConfig = value;
      _this._initialize();
    });
  }
}
</script>

<style>
</style>